<template>
	<view class="personal-info-page">
		<!-- 设置 -->
		<myHeader title="设置" showBack />
		<!-- 资料列表 -->
		<view class="info-list-wrap">
			<view class="info-list">
				<view class="info-item" v-for="(item, index) in infoList" :key="index" @click="navigateTo(item.path)">
					<view class="info-left">
						<u-text :text="item.label" size="30" color="#333" type="tips" class="info-label"></u-text>
					</view>
					<view class="info-right">
						<u-input v-model="dataFrom[item.field]" :placeholder="item.status" suffixIcon="arrow-right"
							inputAlign="right">
							<u-text :text="item.prefix" slot="prefix" margin="0 3rpx 0 0" size="30" color="#333"
								type="tips"></u-text>
						</u-input>
					</view>
				</view>
				<view class="info-item" @click="logout()">
					<view class="info-left">
						<u-text text="退出登录" size="30" color="#333" type="tips" class="info-label"></u-text>
					</view>
					<view class="info-right">
						<u-input suffixIcon="arrow-right"
							inputAlign="right">
							<u-text :text="item.prefix" slot="prefix" margin="0 3rpx 0 0" size="30" color="#333"
								type="tips"></u-text>
						</u-input>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from "@/component/header";
	import {
		getUserInfo
	} from "@/api";
	export default {
		components: {
			myHeader,
		},
		data() {
			return {
				infoList: [{
						label: "手机号",
						field: "mobile",
						prefix: "",
						status: "未设置",
						path:"/pages/my/settings/modifyMobile"
					},
					{
						label: "邮箱",
						field: "mail",
						prefix: "",
						status: "未设置",
						path:"/pages/my/settings/modifyEmail"
					},
					{
						label: "登录密码",
						field: "password",
						prefix: "",
						status: "已设置",
						path:"/pages/my/settings/modifyPassword"
					},
					{
						label: "实名信息",
						field: "name",
						prefix: "",
						path:"/pages/my/settings/modifyCertification"
					}
				],
				userInfo: {},
				dataFrom: {
					mobile: '',
					mail: '',
					password: '已设置',
					name: ''
				}
			};
		},
		async onShow() {
			let res = await getUserInfo();
			if (res) {
				uni.setStorageSync("userInfo", res);
			}
			this.userInfo = {
				...res
			};
			if (this.userInfo.mobile) {
				this.dataFrom.mobile = this.userInfo.mobile.slice(0, 3) + '****' + this.userInfo.mobile.slice(7)
			}
			if (this.userInfo.mail) {
				this.dataFrom.mail = this.userInfo.mail.slice(0, 3) + '****' + this.userInfo.mail.slice(7)
			}
			if (this.userInfo.name) {
				this.dataFrom.name = this.userInfo.name.slice(0, 1) + '*' + this.userInfo.name.slice(2)
			}
		},
		methods: {
			navigateTo(path) {
				if (path) {
					uni.navigateTo({
						url: path
					});
				}
			},
			logout(){
				//确认是否退出登录
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储的用户信息
							uni.clearStorageSync();
							uni.reLaunch({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.personal-info-page {
		background-color: rgba(19, 30, 50, 1);
		min-height: 100vh;
		color: #fff;

		.info-list-wrap {
			padding: 32rpx;
		}

		.info-list {
			.info-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.info-left {
					display: flex;
					align-items: center;

					.info-label {
						font-size: 30rpx;
						color: #ffffff; // 改为白色提高对比度
						margin-right: 20rpx;
					}
				}

				.info-right {
					display: flex;
					align-items: center;

					.u-input {
						flex: 1;
						text-align: right;

						.u-input-input {
							color: rgba(255, 255, 255, 0.6); // 半透明白色
						}

						&::v-deep .u-input__suffix {
							margin-right: 10rpx;
						}
					}

					.arrow-icon {
						margin-left: 12rpx;
						color: rgba(255, 255, 255, 0.4); // 淡色箭头
					}
				}
			}
		}
	}
</style>